<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🌱 智农助手 - 智能农业顾问</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2E7D32', // 农业绿作为主色调
                        secondary: '#8D6E63', // 土壤棕作为辅助色
                        accent: '#FFC107', // 强调色，用于按钮和重要提示
                        light: '#F1F8E9', // 浅色背景
                        dark: '#1B5E20', // 深色文本
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-custom {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-leaf text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold">智农助手</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="#" class="hover:text-accent transition-custom">首页</a>
                <a href="#features" class="hover:text-accent transition-custom">功能</a>
                <a href="#guide" class="hover:text-accent transition-custom">使用指南</a>
                <a href="#about" class="hover:text-accent transition-custom">关于我们</a>
            </nav>
            <button class="md:hidden text-xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 介绍部分 -->
        <section class="mb-12 text-center">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">智能农业顾问，助您丰收</h2>
            <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                无论是病虫害识别、施肥建议还是生长问题，智农助手都能为您提供专业的农业解决方案
            </p>
        </section>

        <!-- 表单和结果区域 -->
        <section class="grid grid-cols-1 lg:grid-cols-5 gap-8 mb-16">
            <!-- 左侧表单 -->
            <div class="lg:col-span-2 bg-white rounded-xl shadow-custom p-6">
                <h3 class="text-xl font-bold text-primary mb-6 flex items-center">
                    <i class="fa fa-pencil-square-o mr-2"></i> 问题提交
                </h3>
                
                <form id="agriForm" class="space-y-5">
                    <div>
                        <label for="crop_type" class="block text-sm font-medium text-gray-700 mb-1">
                            作物类型 <span class="text-red-500">*</span>
                        </label>
                        <select id="crop_type" name="crop_type" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom"
                            required>
                            <option value="">请选择作物类型</option>
                            <option value="小麦">小麦</option>
                            <option value="水稻">水稻</option>
                            <option value="玉米">玉米</option>
                            <option value="大豆">大豆</option>
                            <option value="棉花">棉花</option>
                            <option value="蔬菜">蔬菜</option>
                            <option value="水果">水果</option>
                            <option value="果树">果树</option>
                            <option value="茶叶">茶叶</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="growth_stage" class="block text-sm font-medium text-gray-700 mb-1">
                            生长阶段 <span class="text-red-500">*</span>
                        </label>
                        <select id="growth_stage" name="growth_stage" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom"
                            required>
                            <option value="">请选择生长阶段</option>
                            <option value="播种期">播种期</option>
                            <option value="发芽期">发芽期</option>
                            <option value="幼苗期">幼苗期</option>
                            <option value="生长期">生长期</option>
                            <option value="开花期">开花期</option>
                            <option value="结果期">结果期</option>
                            <option value="成熟期">成熟期</option>
                            <option value="收获期">收获期</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="problem_type" class="block text-sm font-medium text-gray-700 mb-1">
                            问题类型 <span class="text-red-500">*</span>
                        </label>
                        <select id="problem_type" name="problem_type" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom"
                            required>
                            <option value="">请选择问题类型</option>
                            <option value="病虫害防治">病虫害防治</option>
                            <option value="施肥建议">施肥建议</option>
                            <option value="灌溉管理">灌溉管理</option>
                            <option value="生长异常">生长异常</option>
                            <option value="收获储存">收获储存</option>
                            <option value="其他问题">其他问题</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="region" class="block text-sm font-medium text-gray-700 mb-1">
                            种植地区 (可选)
                        </label>
                        <input type="text" id="region" name="region" 
                            placeholder="例如：山东省临沂市"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom">
                    </div>
                    
                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
                            问题描述 <span class="text-red-500">*</span>
                        </label>
                        <textarea id="description" name="description" rows="4" 
                            placeholder="请详细描述您遇到的问题，例如：叶子出现黄色斑点，生长缓慢..."
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom"
                            required></textarea>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            上传图片 (可选)
                        </label>
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary transition-custom">
                            <input type="file" id="photo" name="photo" accept="image/*"
                                class="hidden" onchange="previewImage(event)">
                            <label for="photo" class="cursor-pointer">
                                <i class="fa fa-camera text-3xl text-gray-400 mb-2"></i>
                                <p class="text-gray-500">点击上传问题部位的清晰照片</p>
                            </label>
                            <div id="imagePreview" class="mt-3 hidden">
                                <img id="previewImg" src="" alt="预览图" class="max-w-full max-h-40 mx-auto rounded">
                            </div>
                        </div>
                    </div>
                    
                    <button type="submit" id="submitBtn"
                        class="w-full bg-accent hover:bg-amber-500 text-gray-800 font-bold py-3 px-4 rounded-lg transition-custom flex items-center justify-center">
                        <i class="fa fa-lightbulb-o mr-2"></i> 获取专业建议
                    </button>
                </form>
            </div>
            
            <!-- 右侧结果 -->
            <div class="lg:col-span-3 bg-white rounded-xl shadow-custom overflow-hidden">
                <div class="bg-primary text-white p-4">
                    <h3 class="text-xl font-bold flex items-center">
                        <i class="fa fa-comments-o mr-2"></i> 农业专家建议
                    </h3>
                </div>
                
                <div id="initialState" class="p-8 text-center h-[500px] flex flex-col items-center justify-center">
                    <i class="fa fa-leaf text-6xl text-gray-300 mb-4"></i>
                    <p class="text-gray-500 text-lg">请填写左侧表单并提交，获取专业的农业建议</p>
                    <p class="text-gray-400 mt-2">我们的AI农业专家将为您提供针对性的解决方案</p>
                </div>
                
                <div id="loadingState" class="p-8 text-center h-[500px] flex flex-col items-center justify-center hidden">
                    <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
                    <p class="text-gray-600 text-lg">正在分析您的问题...</p>
                    <p class="text-gray-400 mt-2">AI农业专家正在为您制定解决方案，请稍候</p>
                </div>
                
                <div id="errorState" class="p-8 h-[500px] flex flex-col items-center justify-center hidden">
                    <i class="fa fa-exclamation-triangle text-6xl text-amber-500 mb-4"></i>
                    <p class="text-gray-600 text-lg" id="errorMessage">发生错误，请稍后重试</p>
                </div>
                
                <div id="resultState" class="p-6 h-[500px] overflow-y-auto hidden">
                    <div id="resultContent" class="prose max-w-none">
                        <!-- 结果将在这里显示 -->
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 功能特点 -->
        <section id="features" class="mb-16">
            <h2 class="text-2xl font-bold text-center text-dark mb-10">智农助手的核心功能</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white rounded-xl shadow-custom p-6 hover:transform hover:scale-105 transition-custom">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-bug text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">病虫害识别</h3>
                    <p class="text-gray-600">
                        上传作物照片，AI将快速识别病虫害类型，并提供针对性的防治方案和用药建议。
                    </p>
                </div>
                
                <div class="bg-white rounded-xl shadow-custom p-6 hover:transform hover:scale-105 transition-custom">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-flask text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">施肥指导</h3>
                    <p class="text-gray-600">
                        根据作物类型、生长阶段和土壤状况，提供科学的施肥方案，包括肥料种类和用量建议。
                    </p>
                </div>
                
                <div class="bg-white rounded-xl shadow-custom p-6 hover:transform hover:scale-105 transition-custom">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-tint text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">生长管理</h3>
                    <p class="text-gray-600">
                        针对作物生长异常问题，分析可能原因并提供解决方案，帮助作物恢复健康生长。
                    </p>
                </div>
            </div>
        </section>
        
        <!-- 使用指南 -->
        <section id="guide" class="mb-16 bg-white rounded-xl shadow-custom p-8">
            <h2 class="text-2xl font-bold text-center text-dark mb-8">使用指南</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <img src="https://picsum.photos/600/400?random=1" alt="农民使用智农助手" class="rounded-lg w-full h-auto">
                </div>
                
                <div class="flex flex-col justify-center">
                    <ol class="space-y-4">
                        <li class="flex">
                            <div class="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center mr-3 mt-0.5">1</div>
                            <div>
                                <h3 class="font-bold text-lg">选择作物信息</h3>
                                <p class="text-gray-600">准确选择您种植的作物类型和当前生长阶段，这是提供精准建议的基础。</p>
                            </div>
                        </li>
                        <li class="flex">
                            <div class="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center mr-3 mt-0.5">2</div>
                            <div>
                                <h3 class="font-bold text-lg">描述问题详情</h3>
                                <p class="text-gray-600">尽可能详细地描述您遇到的问题，包括症状、发生时间和范围等信息。</p>
                            </div>
                        </li>
                        <li class="flex">
                            <div class="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center mr-3 mt-0.5">3</div>
                            <div>
                                <h3 class="font-bold text-lg">上传相关图片</h3>
                                <p class="text-gray-600">拍摄问题部位的清晰照片并上传，这将大大提高AI分析的准确性。</p>
                            </div>
                        </li>
                        <li class="flex">
                            <div class="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center mr-3 mt-0.5">4</div>
                            <div>
                                <h3 class="font-bold text-lg">获取专业建议</h3>
                                <p class="text-gray-600">提交信息后，AI将在几秒内生成专业建议，包括问题分析和解决方案。</p>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
                <div>
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-leaf mr-2"></i> 智农助手
                    </h3>
                    <p class="text-gray-400">
                        智农助手是一款基于人工智能的农业辅助工具，致力于为广大农民提供专业、及时的农业技术支持，助力农业生产。
                    </p>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-accent transition-custom">首页</a></li>
                        <li><a href="#features" class="hover:text-accent transition-custom">功能</a></li>
                        <li><a href="#guide" class="hover:text-accent transition-custom">使用指南</a></li>
                        <li><a href="#about" class="hover:text-accent transition-custom">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-center"><i class="fa fa-envelope-o mr-2"></i> contact@smartagri.com</li>
                        <li class="flex items-center"><i class="fa fa-phone mr-2"></i> 400-123-4567</li>
                    </ul>
                    <div class="mt-4 flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-accent transition-custom"><i class="fa fa-weixin text-xl"></i></a>
                        <a href="#" class="text-gray-400 hover:text-accent transition-custom"><i class="fa fa-weibo text-xl"></i></a>
                        <a href="#" class="text-gray-400 hover:text-accent transition-custom"><i class="fa fa-qq text-xl"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 pt-6 text-center text-gray-500 text-sm">
                <p>© 2025 智农助手 - 智能农业顾问. 保留所有权利.</p>
                <p class="mt-1">免责声明：本工具提供的建议仅供参考，实际农业生产请结合当地实际情况和专业技术人员指导。</p>
            </div>
        </div>
    </footer>

    <script>
        // 图片预览功能
        function previewImage(event) {
            const file = event.target.files[0];
            if (file) {
                const previewContainer = document.getElementById('imagePreview');
                const previewImg = document.getElementById('previewImg');
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    previewContainer.classList.remove('hidden');
                }
                reader.readAsDataURL(file);
            }
        }
        
        // 表单提交处理
        document.getElementById('agriForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = new FormData(this);
            const data = {
                crop_type: formData.get('crop_type'),
                problem_type: formData.get('problem_type'),
                growth_stage: formData.get('growth_stage'),
                description: formData.get('description'),
                region: formData.get('region') || '',
                photos: []
            };
            
            // 简单验证
            if (!data.crop_type || !data.problem_type || !data.growth_stage || !data.description) {
                alert('请填写所有必填项 (*)。');
                return;
            }
            
            // 显示加载状态
            document.getElementById('initialState').classList.add('hidden');
            document.getElementById('resultState').classList.add('hidden');
            document.getElementById('errorState').classList.add('hidden');
            document.getElementById('loadingState').classList.remove('hidden');
            
            // 禁用提交按钮
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 处理中...';
            
            try {
                // 发送请求到API
                const response = await fetch('/api/advice', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (response.ok && result.success) {
                    // 显示成功结果
                    document.getElementById('loadingState').classList.add('hidden');
                    document.getElementById('resultState').classList.remove('hidden');
                    
                    // 格式化结果为HTML
                    const formattedResult = formatMarkdown(result.result);
                    document.getElementById('resultContent').innerHTML = formattedResult;
                } else {
                    // 显示错误信息
                    throw new Error(result.error || '获取建议失败，请重试');
                }
            } catch (error) {
                console.error('请求失败:', error);
                document.getElementById('loadingState').classList.add('hidden');
                document.getElementById('errorState').classList.remove('hidden');
                document.getElementById('errorMessage').textContent = error.message;
            } finally {
                // 恢复按钮状态
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fa fa-lightbulb-o mr-2"></i> 获取专业建议';
            }
        });
        
        // 简单的Markdown转HTML格式化
        function formatMarkdown(text) {
            // 处理标题
            text = text.replace(/^# (.*$)/gm, '<h3 class="text-xl font-bold text-primary mt-6 mb-3">$1</h3>');
            text = text.replace(/^## (.*$)/gm, '<h4 class="text-lg font-bold text-dark mt-4 mb-2">$1</h4>');
            
            // 处理列表
            text = text.replace(/^- (.*$)/gm, '<li class="ml-6 mb-1">$1</li>');
            text = text.replace(/(<li.*?>.*?<\/li>)+/gs, '<ul class="mb-4">$&</ul>');
            
            // 处理加粗
            text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
            
            // 处理换行
            text = text.replace(/\n/g, '<br>');
            
            return text;
        }
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
